<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highstock Example</title>
		<script type="text/javascript" src="./Highstock-1.3.10/js/jquery.min.js"></script>
		
		<script type="text/javascript">
var path = "./data/candlestick-and-volume.json";
var seriesOptions = [];
$(function() {
	$.getJSON(path, function(result) {
		var data = result.data;
		
		// split the data set into ohlc and volume
		var ohlc = [],
			volume = [],
			avg1 = [];
			avg2 = [];
			avg3 = [];
			avg4 = [];
			dataLength = data.length;
			
		for (i = 0; i < dataLength; i++) {
			ohlc.push([
				data[i][0], // the date
				data[i][1], // open
				data[i][2], // high
				data[i][3], // low
				data[i][4] // close
			]);
			
			volume.push([
				data[i][0], // the date
				data[i][5] // the volume
			]);
			
			avg1.push([
				data[i][0],
				data[i][1]-20
			]);
			
			avg2.push([
				data[i][0],
				data[i][2]-40
			]);
			avg3.push([
				data[i][0],
				data[i][3]-60
			]);
			avg4.push([
				data[i][0],
				data[i][4]-80
			]);
		}
		
		seriesOptions[0] = {
			name: "AVG5",
			data: avg1
		};
		seriesOptions[1] = {
			name: "AVG10",
			data: avg2
		};
		
		seriesOptions[2] = {
			name: "AVG20",
			data: avg3
		};
		seriesOptions[3] = {
			name: "AVG35",
			data: avg4
		};


		// set the allowed units for data grouping
		var groupingUnits = [[
			'week',                         // unit name
			[1]                             // allowed multiples
		], [
			'month',
			[1, 2, 3, 4, 6]
		]];

		// create the chart
		$('#container').highcharts('StockChart', {
		    
		    rangeSelector: {
		        selected: 1
		    },

		    title: {
		        text: 'AAPL Historical'
		    },

		    yAxis: [{
		        title: {
		            text: 'OHLC'
		        },
		        height: 200,
		        lineWidth: 2
		    }, {
		        title: {
		            text: 'Volume'
		        },
		        top: 300,
		        height: 100,
		        offset: 0,
		        lineWidth: 2
		    }],
		    
		    series: [{
		        type: 'candlestick',
		        name: 'AAPL',
		        data: ohlc,
		        dataGrouping: {
					units: groupingUnits
		        }
		    }, {
		        type: 'column',
		        name: 'Volume',
		        data: volume,
		        yAxis: 1,
		        dataGrouping: {
					units: groupingUnits
		        }
		    },seriesOptions[0],seriesOptions[1],seriesOptions[2],seriesOptions[3]
		    ] 
		});
	});
});
		</script>
	</head>
	<body>
<script src="./Highstock-1.3.10/js/highstock.js"></script>
<script src="./Highstock-1.3.10/js/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 600px"></div>
	</body>
</html>